<template>
  <Modal v-model="visible" width='800' :mask-closable="false" :closable="false" :title="title">
    <Form ref='pageModel' :model="pageModel" :rules="ruleInline" label-position="right" inline :label-width='100'>
      <Row>
        <FormItem prop="examType" label="考试类型">
          <Select v-model="pageModel.examType" placeholder="请选择" clearable style="width:200px" :disabled="!isShow">
            <Option v-for="(_item,index) in typeArr" :key="index" :value="_item.id" :disabled="!isShow">{{_item.title}}</Option>
          </Select>
        </FormItem>
      </Row>
      <Row>
        <FormItem prop="sort" label="顺序">
          <InputNumber v-model="pageModel.sort"  placeholder="请输入" clearable style="width:200px" :readonly="!isShow" :min="1"></InputNumber>
        </FormItem>
        <FormItem prop="score" label="分值">
          <InputNumber v-model="pageModel.score"  placeholder="请输入" clearable style="width:200px" :readonly="!isShow" :min="1"></InputNumber>
        </FormItem>
      </Row>
      <Row>
        <FormItem prop="examinationTitle" label="题目内容">
          <Input v-model="pageModel.examinationTitle"  type="textarea" placeholder="请输入" clearable style="width:200px" :readonly="!isShow"></Input>
        </FormItem>
      </Row>
      <Row>
        <FormItem prop="options" label="题目选项">
          <test-table :content.sync="pageModel.options" :isShow="isShow"></test-table>
        </FormItem>
      </Row>
    </Form>
    <div slot="footer" style="text-align: right">
      <div v-if="isShow">
        <Button @click="cancel"  class="m-l-sm">取消</Button>
        <!--      <Button @click="next" class="m-l-sm">保存并继续添加</Button>-->
        <Button @click="save" type="primary" class="m-l-sm">保存</Button>
      </div>
      <div v-else>
        <Button @click="cancel" type="primary" class="m-l-sm">确定</Button>
      </div>
    </div>
  </Modal>
</template>

<script>
  import testTable from '@/components/testTable/testTable.vue';
  import {examType} from '@/libs/util.js';
  import {saveUnifiedExamItems,getExamItemDetail} from '@/api/online-exam';

  export default {
      props:{
        unifiedId:{
          type: String,
          default: ''
        },
        visible:{
          type:Boolean,
          default:false
        },
        title:{
          type:String,
          default:'新增试题'
        },
        unifiedItemId:{
          type: Number,
          default: null
        }
      },
      components:{
        testTable
      },
        data() {
            return {
              typeArr:examType,
              pageModel:{
                options: [],
                examType:'',
                sort:null,
                score:null,
                examinationTitle:''
              },
              ruleInline:{
                examinationTitle: [{ required: true, message: "请输入考试名称" }],
                sort: [{ required: true, message: "请输入排序"}],
                score: [{ required: true, message: "请输入分数"}],
                options: [{ required: true, type: 'array', min: 1, message: '请选择正确选项'},],
                examType: [{ required: true, message: "请选择类型" }],
              },
              isShow:false
            }
        },
        watch: {
          title(val,old) {
            this.isShow = val === '新增试题';
          },
          visible(val,old) {
            if(val) {
              if(this.unifiedItemId) {
                getExamItemDetail(this.unifiedItemId)
                  .then(res => {
                    let content = res;
                    content.options.forEach(x => {
                      if(x.rightFlag === '1') {
                        x.rightFlag = true
                      }else {
                        x.rightFlag = false;
                      }
                    });
                    this.pageModel.options = content.options;
                    this.pageModel.examType = content.examType;
                    this.pageModel.sort = content.sort;
                    this.pageModel.score = content.score;
                    this.pageModel.examinationTitle = content.examinationTitle;
                  })
              }else {
                this.pageModel.options =[{
                  rightFlag: true,
                  optionName:'A',
                  optionContent:''
                }];
              }
            }
          },
        },
        computed: {},
        methods: {
          cancel() {
            this.$emit('update:visible',false);
            this.$refs["pageModel"].resetFields();
          },
          save() {
            this.$refs.pageModel.validate((valid) => {
              if (valid) {
                let isSelect = this.pageModel.options.filter(x => x.rightFlag === true);
                let isContent = this.pageModel.options.filter(x => x.optionContent === '');
                if(isSelect.length === 0){
                  this.$Message.warning('请选择正确答案')
                }else if(isContent.length > 0) {
                  this.$Message.warning('请将题目填写完整')
                }else if(this.pageModel.options.length <= 1){
                  this.$Message.warning('请最少提供两个选项')
                } else{
                  let content =JSON.stringify(this.pageModel);
                  let list = JSON.parse(content);
                  list.options.forEach(x =>  {
                    if(x.rightFlag) {
                      x.rightFlag = '1'
                    }else {
                      x.rightFlag = '0'
                    }
                  });
                  let param = {
                    unifiedId: this.unifiedId,
                    examinationList: [list]
                  };
                  saveUnifiedExamItems(param)
                    .then(res => {
                      this.$emit('update');
                      this.cancel()
                    });
                }

              }
            })

          },
          next() {

          }
        }
    };
</script>
<style scoped>

</style>
